<!--  -->
<template>
    <div class="invoiceManage page-main">
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="批次号">
                <el-input v-model="formInline.batch_number" placeholder="输入批次号"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formInline.status" placeholder="选择状态" @change="changeStatusSelect">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="申请中" value="1"></el-option>
                    <el-option label="已开票" value="2"></el-option>
                </el-select>
            </el-form-item>
        </CustomForm>

        <div class="main">
            <el-table v-loading="tableLoading" ref="multipleTable" :data="tableData" height="620" tooltip-effect="dark"
                style="width: 100%;margin-top: 40px;">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column prop="batch_number" label="批次号" align="center"></el-table-column>
                <el-table-column prop="company" :show-overflow-tooltip="true" label="公司名称"
                    align="center"></el-table-column>
                <el-table-column prop="money" label="总金额(元)" align="center"></el-table-column>
                <el-table-column prop="number" label="总单数" align="center"></el-table-column>
                <el-table-column prop="weight" label="总重量(吨)" align="center"></el-table-column>
                <el-table-column prop="tax" label="税号" align="center"></el-table-column>
                <el-table-column prop="add_time" label="申请时间" align="center"></el-table-column>
                <el-table-column prop="status" label="支付状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1" style="color: blue">申请中</span>
                        <span v-if="scope.row.status == 2" style="color: green">已开票</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="240">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 1" size="mini" type="primary"
                            @click="ticketHandler(scope.row)">开票</el-button>
                        <el-button size="mini" type="primary"
                            @click="showDetailDialog(scope.row.batch_number)">详情</el-button>
                        <el-button v-if="scope.row.url" size="mini" @click="downloadFile(scope.row.url)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizeList" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

            <el-dialog class="dialog" title="发票详情" :close-on-click-modal="false" :visible.sync="dialogVisible"
                top="10vh" width="70%">
                <InvoiceDetailDialog v-if="dialogVisible" :batch_number="batch_number" @closeDialog="closeDialog" />
            </el-dialog>

            <el-dialog class="dialog" title="开票" :close-on-click-modal="false" :visible.sync="dialogVisibleTicket"
                top="10vh" width="50%">
                <Ticket v-if="dialogVisibleTicket" :row="ticketRows" @closeDialog="closeTicketDialog" />
            </el-dialog>
        </div>
    </div>
</template>

<script>
import InvoiceDetailDialog from "./components/invoiceDetailDialog";
import Ticket from "./components/ticket";
import { invoiceDetails } from "@/api/moneyManagment.js";
import { downloadFile } from "@/utils/tool.js";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        InvoiceDetailDialog,
        Ticket
    },
    data() {
        //这里存放数据
        return {
            dialogVisible: false,
            batch_number: '',

            currentPage: 1,
            pageSizeList: [10, 20, 30, 40],
            total: 0,
            pageSize: 10,

            tableLoading: true,
            labelStyle: { "text-align": "center", "font-weight": "bold" },
            contentStyle: {
                color: "#444",
                "font-weight": "bold",
                "min-width": "200px"
            },
            tableData: [],
            formInline: {
                batch_number: "", //批次号
                status: '0',
                page: 1,
                pageSize: 10,
            },
            rows: [],
            dialogVisibleTicket: false,
            ticketRows: {},
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},

    //生命周期 - 创建完成（可以访问当前this实例）
    created() { },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.invoiceDetails();
    },
    //方法集合
    methods: {
        //关闭支付详情弹框
        closeDialog() {
            this.dialogVisible = false;
            //重新刷新表格
            this.currentPage = 1;
            this.invoiceDetails();

            //更新账户信息
            //this.$store.dispatch("user/setAccountBalance");
        },
        showDetailDialog(batch_number) {
            this.batch_number = batch_number;
            this.dialogVisible = true;
        },
        async invoiceDetails() {
            this.tableLoading = true;

            let result = await invoiceDetails({
                ...this.formInline,
                pageSize: this.pageSize,
                page: this.currentPage
            });
            this.tableLoading = false;

            if (result.code == 200) {
                this.tableData = result.data.list;
                this.total = result.data.total;
            }
        },
        async getSelection() {
            let rows = this.$refs.multipleTable.selection;

            if (!rows.length) {
                this.$message.error("请选择要操作的项");
                return;
            }
            //判断是否存在已转账数据
            if (rows.some(item => item.is_invoice != 0)) {
                this.$message.error("存在已开票订单，请重新选择");
                return;
            }
            this.rows = rows;
            this.dialogVisible = true;
        },
        handleSizeChange(val) {
            this.formInline.pageSize = val;
            this.formInline.page = 1;
            this.invoiceDetails();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.invoiceDetails();
        },
        downloadFile,
        onSubmit() {
            this.formInline.page = 1;
            this.invoiceDetails();
        },
        resetTable() {
            this.formInline = {
                batch_number: "", //批次号
                status: '',
                page: 1,
                pageSize: 10,
            };

            this.invoiceDetails();
        },
        changeStatusSelect() {
            this.formInline.page = 1;
            this.invoiceDetails();
        },
        ticketHandler(row) {
            this.ticketRows = row;
            this.dialogVisibleTicket = true;
        },
        closeTicketDialog() {
            this.dialogVisibleTicket = false;
            this.invoiceDetails();
        }
    }
};
</script>
<style lang='scss' scoped>
.invoiceManage {
    padding: 10px;
    background: #fff;

    .header {
        color: $theme-Danger;
        font-weight: bold;
        margin-bottom: 10px;

        .t1 {
            margin-right: 20px;
        }
    }

    .main {

        .tool {
            border-left: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            padding: 5px;
            background: #fafafa;
        }
    }
}

::v-deep .el-dialog__header {
    padding-top: 10px;
    padding-left: 20px;
}

::v-deep .el-dialog {
    height: 80vh;
    overflow: hidden;

    .el-dialog__body {
        height: calc(88vh - 40px);
        overflow: auto;
    }
}

::v-deep .el-pagination {
    margin-top: 30px;
}
</style>